<template>
  <div>
    <div ref="barEchart" class="echartBoxTwo" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
])
export default {
  created() {

  },
  mounted() {
    const barEchart = echarts.init(this.$refs.barEchart)
    barEchart.setOption({
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          ['price', '公寓', '别墅', '商铺'],
          ['1000', 43, 85, 93],
          ['2000', 83, 73, 55],
          ['3000', 86, 65, 82],
          ['4000', 72, 53, 39],
          ['5000', 72, 53, 39]
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},

      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    })
  }

}
</script>

<style>
.echartBoxTwo{
  height: 400px;
}
</style>
